<template>
    <hl-page title="重置密码" :hidden-back="false" :hidden-tab-bar="true">
        <div class="login-panel" slot="content">
            <section class="login" id="login">
                <div class="form-cell">
                    <p>
                        <i class="amds icon-user"></i>
                        <input type="tel" name="username" v-model="username" placeholder="请输入手机号">
                    </p>
                </div>

                <div class="form-cell">
                    <p>
                        <i class="amds icon-ecurityCode"></i>
                        <input type="text" name="password" v-model="sms_code" placeholder="请输入验证码">
                        <cube-button :disabled="disabled" @click="getCodeClick" :inline="true">{{btn_code}}
                        </cube-button>
                    </p>
                </div>
                <div class="form-cell">
                    <p>
                        <i class="amds icon-mima"></i>
                        <input type="password" name="password" v-model="password" placeholder="新登录密码">
                    </p>
                </div>

                <div class="btn-group" style="margin-top: 24px">
                    <cube-button @click="submit" :primary="true">立即找回</cube-button>
                    <p class="has-tips">已有账号？
                        <router-link to="/login">登录</router-link>
                    </p>
                </div>
            </section>
        </div>
    </hl-page>
</template>

<script>
    import HlPage from "../components/hl-page";
    import {Url} from "../utils/config";

    export default {
        components: {HlPage},
        name: "find-pass",
        data() {
            return {
                username: '',
                password: "",
                invite_code: '',
                sms_code: '',
                btn_code: "获取验证码",
                disabled: false,
                count_down: 60,
                agree: true,
                option: {
                    label: '同意用户协议',
                    value: '同意用户协议',
                    disabled: false
                }
            }
        },
        methods: {
            getCodeClick() {
                const toast = this.$createToast({
                    time: 0,
                    txt: '获取验证码中'
                })
                toast.show();
                this.disabled = true;
                this.$get(Url.smsCode, {phone: this.username}).then((res) => {
                    toast.hide();
                    if (res.data.is_mobile) {
                        this.$createToast({
                            txt: res.msg,
                            type: 'warn'
                        }).show();

                    } else {
                        this.$createDialog({
                            type: 'alert',
                            title: '获取验证码成功',
                            content: `您的验证码是：${res.data.code}`,
                            icon: 'cubeic-alert',
                            onConfirm: () => {

                            }
                        }).show()
                    }

                    this.countDown();
                }).catch((error) => {
                    this.disabled = false;
                    this.$createToast({
                        txt: error,
                        type: 'error'
                    }).show();
                    console.log(error);
                })
            },
            countDown() {
                let timer = setInterval(() => {
                    this.count_down--;
                    if (this.count_down <= 0) {
                        this.count_down = 60;
                        clearInterval(timer);
                        this.disabled = false;
                        this.btn_code = "获取验证码"
                    } else {
                        this.btn_code = `${this.count_down}S后重新获取`
                    }
                }, 1000)
            },
            checkForm() {
                if (this.phone == "") {
                    this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: `请输入电话`,
                        icon: 'cubeic-alert',
                        onConfirm: () => {

                        }
                    }).show()
                    return false;
                }
                if (this.code == "") {
                    this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: `请输入验证码`,
                        icon: 'cubeic-alert',
                        onConfirm: () => {

                        }
                    }).show()
                    return false;
                }
                if (this.password == "") {
                    this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: `请输入新密码`,
                        icon: 'cubeic-alert',
                        onConfirm: () => {

                        }
                    }).show()
                    return false;
                }
                return true
            },
            submit() {
                if (this.checkForm()) {

                }
                const toast = this.$createToast({
                    time: 0,
                    txt: '正在重置'
                })
                toast.show();
                this.$post(Url.find, {
                    username: this.username,
                    password: this.password,
                    sms_code: this.sms_code,
                }).then((res) => {
                    toast.hide();
                    this.$createDialog({
                        type: 'alert',
                        title: '重置密码成功',
                        content: `点击确认返回登录`,
                        icon: 'cubeic-alert',
                        onConfirm: () => {
                            this.$router.push('/login')
                        }
                    }).show()
                }).catch((error) => {
                    this.$createToast({
                        txt: error,
                        type: 'error'
                    }).show();
                    console.log(error);
                })
            }
        }
    }
</script>

<style lang="less">
    @import "../assets/theme";

    .login-panel {
        background: #fff;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 10000;
        section {
            padding: 94px 0px 120px 0px;
            box-sizing: border-box;
        }
        .agree-box {
            margin-left: 48px;
            margin-right: 48px;
            font-size: 14PX;
        }
        .form-cell {
            height: 60px;
            padding: 12px 0;
            margin: 0 12px;
            border-bottom: 1PX solid #ddd;
            display: flex;
            flex-direction: row;
            align-items: center;
            > p {
                height: 60px;
                margin-left: 40px;
                margin-right: 40px;
                display: flex;
                flex: 1;
                font-size: 14PX;
                justify-content: flex-start;
                align-items: center;
                .amds {
                    font-size: 48px;
                    color: #e64e4d;
                }
                input {
                    flex: 1;
                    border: none;
                    outline: none;
                    margin-left: 20px;
                }
            }
        }
        .btn-group {
            margin-left: 24px;
            margin-right: 24px;
            .has-tips {
                font-size: 14PX;
                color: #888888;
                height: 80px;
                line-height: 80px;
                text-align: center;
                a {
                    color: @app-color;
                }
            }
        }
        .btn {
            width: 100%;
            height: 88px;
            background: #888888;
            line-height: 88px;
            border-radius: 30px;
            color: #ffffff;
            font-size: 16PX;
            outline: none;
            border: solid 1PX transparent;
            display: block;
            text-align: center;
            margin-bottom: 30px;

            &.btn-primary {
                background: #E4393C;
                color: white;
            }

            &.btn-outline {
                background: transparent;
                border: solid 1PX #e0e0e0;
                color: #888888;
            }
        }
    }
</style>